<template>
  <div>
    <van-nav-bar title="目的地" left-arrow @click-left="onClickLeft" class="title"/>
    <div class="con">
      <!-- 导航部分 -->
      <div class="daoh">{{ desD.continent }}&emsp;-->{{ desD.country }}</div>
      <!-- 一级大标题 -->
      <div class="firTit">
        <span class="ao">{{ desD.country }}</span>
        <span class="Au">{{ desD.country_en }}</span>
      </div>
      <!-- 二级标题 -->
      <div class="natS">国家速写</div>
      <!-- 内容 -->
      <div class="contant">{{ desD.country_base_info.abstracts }}</div>
      <ul class="deatil">
        <li>
          <i>面积</i>
          <span>{{ desD.country_base_info.land_area }}</span>
        </li>
        <li>
          <i>民族</i>
          <span>{{ desD.country_base_info.nation }}</span>
        </li>
        <li>
          <i>GDP</i>
          <span>{{ desD.country_base_info.per_capita_gdp }}$/人</span>
        </li>
        <li>
          <i>人口</i>
          <span>{{ desD.country_base_info.total_population }}万人</span>
        </li>
      </ul>
      <!-- 二级标题 -->
      <div class='peoLife'>当地人生活</div>
      <!-- 内容 -->
      <div class="peocan">{{ desD.country_base_info.local_life }}</div>
    </div>
  </div>
</template>

<script>
// 引入vant组件
import Vue from "vue";
import { NavBar, Col, Row } from "vant";
Vue.use(NavBar);
Vue.use(Col);
Vue.use(Row);

export default {
  data() {
    return {
      desD: [],
      city: localStorage.getItem("hotCity") || localStorage.getItem("othCity"),
      // 获取本地存储中的数据
      data:
        localStorage.getItem("hotCityIn") || localStorage.getItem("othCityIn"),
    };
  },
  methods: {
    onClickLeft() {
      // window.history.go(-1)
      this.$router.go(-1);
    },
  },
  created() {
    // 获取本地存储中的值
    // 获取本地存储中的城市
    // 定义一个地址
    let url = "";
    JSON.parse(this.data).forEach((item) => {
      if (item.country.includes(this.city)) {
        url =
          "http://www.51houniao.com/product/desc/CountryDetail/" +
          item.country +
          "/" +
          item.country_en;
      }
    });
    // 发起axios请求
    this.$nextTick(() => {
      this.$http.get(url).then((ret) => {
        this.desD = ret;
      });
    });
      // 生命周期开始之前让底部不渲染
     // 隐藏底部导航
        this.$store.commit("common/setisShow", false);
  },
  // 生命周期结束后底部显示
  mounted(){
        this.$store.commit("common/setisShow", true);

  }

};
</script>

<style scoped>
.daoh {
  padding: 20px 16px;
  color: #838282;
  font-size: 16px;
}
.firTit {
  border: 1px solid #445356;
  font-size: 18px;
  color: #445356;
  display: inline-block;
  margin-left: 87px;
  margin-bottom: 10px;
}
.firTit .ao,
.firTit .Au {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  padding: 6px 22px;
}
.firTit .ao {
  background: #445356;
  color: #fff;
}
.firTit .Au {
  text-transform: capitalize;
}
.natS,
.peoLife {
  width: 100%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  color: #fff;
  background: url(../../assets/img/bg_03.png) center center no-repeat;
  background-size: 154px;
}
.contant {
  color: #838282;
  font-size: 14px;
  line-height: 22px;
}
.deatil {
  overflow: hidden;
}
.deatil li {
  border-right: 1px solid #eee;
  min-width: 50%;
  max-width: 100%;
  float: left;
  padding: 4px;
  box-sizing: border-box;
}
.deatil li i {
  background: #7c8688;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  display: inline-block;
  float: none;
  padding: 2px 4px;
}
.deatil li span {
  display: inline;
  float: none;
  margin-left: 7px;
  color: #7c8688;
  padding: 0 4px;
  min-width: 56px;
}
.peocan{
  padding: 0 8px;
    color: #838282;
    font-size: 14px;
    line-height: 22px;
    margin: 10px 0;
}
.con{
  margin-bottom: 50px;
}
</style>